<template>
  <a-form
    ref="formRef"
    class="form"
    :model="filterData"
    layout="inline"
    v-if="!$route.params.tabStatus"
  >
    <a-form-item key="keyword" name="keyword">
      <a-input
        v-model:value.trim="filterData.keyword"
        placeholder="搜索项目名称"
      >
        <template #prefix> <search-outlined /> </template>
      </a-input>
    </a-form-item>
    <a-form-item v-for="item in filterForm" :key="item.key" :name="item.key">
      <component
        :is="compMap[item.type] || 'a-' + item.type"
        v-model:value.trim="filterData[item.key || '']"
        :placeholder="`${item.type === 'select' ? '请选择' : '请填写'}${
          item.label
        }`"
        :allowClear="true"
        v-bind="item.props"
      />
    </a-form-item>
  </a-form>
  <Table :tableProps="tableProps" @tableChange="handleTableChange">
    <template #action="{ record }">
      <a-button
        v-if="record.status === 100"
        type="link"
        style="padding-right: 0"
        :loading="record.loading"
        @click="handleConfirm(record)"
        >确认</a-button
      >
      <a-button
        v-if="record.status === 400"
        type="link"
        style="padding-right: 0"
        @click="handleDistributeClick(record)"
        >分配审核人员</a-button
      >
      <a-button
        type="link"
        style="padding-right: 0"
        :href="`#/backend/project/detail/${record.id}/${record.status}/basicinfo`"
        >详情</a-button
      >
    </template>
  </Table>
</template>
<script lang="ts" setup>
import { createVNode, getCurrentInstance, ref } from "vue";
import { projectFilterForm, getProjectTableColumns } from "../config";
import { confirmProjectInfo, getAllProjectList } from "@/api";
import { compMap } from "@/components/Form/config";
import Modal from "ant-design-vue/es/modal";
import DistributeExpertModal from "./DistributeExpertModal.vue";
import { useTableData } from "@/hooks";
import Table from "@/components/Table.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const formRef = ref();
const tabStatusValueMap: Record<string, any> = {
  approval: 100,
  assign: 400,
};
const filterData = ref<Record<string, any>>({
  tabStatus: tabStatusValueMap[String(route.params.tabStatus)],
});
const filterForm = projectFilterForm;
const { tableProps, handleTableChange, getData } = useTableData(
  getAllProjectList,
  filterData
);
tableProps.columns = getProjectTableColumns();
const appContext = getCurrentInstance()?.appContext;
const handleConfirm = (record: Record<string, any>) => {
  record.loading = true;
  confirmProjectInfo(record.id)
    .then(() => {
      getData();
    })
    .catch(console.error)
    .finally(() => {
      record.loading = undefined;
    });
};
const handleDistributeClick = (record: Record<string, any>) => {
  const instance = { current: {} };
  instance.current = Modal.confirm({
    icon: null,
    title: "选择专家",
    centered: true,
    maskClosable: true,
    closable: true,
    content: () =>
      createVNode(DistributeExpertModal, {
        record,
        instance,
        onUpdate: () => {
          getData();
        },
      }),
    width: 900,
    appContext,
  });
};
</script>
<style lang="scss" scoped></style>
